<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>商品列表</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>

	<body>
		<div class="container" style="padding-top: 100px;" >
		<h1 style="text-align: center;color: #7266ba;">商品列表</h1>
		<button id="addItem" type="button" class="btn btn-success">添加商品</button>
		<button id="toLogin" type="button" class="btn btn-default">去登录</button>
		<div class="row" id="itemList">
        <!--<div class="col-lg-4">
          <h2>Safari bug warning!</h2>
          <img class="img-thumbnail" src="http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/505/505-bigskin-3.jpg" alt="Generic placeholder image" style="width: 100%;">
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a>
          	<a class="btn btn-info" href="#" role="button">View details »</a>
          </p>
        </div>-->
        
      </div>

		</div>

		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var item_id;
				var html = "";
				$.ajax({
						type:"get",
						url:"http://127.0.0.1:8090/item/list",
						data:{},
						async:true,
						xhrFields:{withCredentials:true},
						success:function(data){
						if(data.status=="success"){
							var items = data.data;
							$.each(items, function(i,item) {
								html = '<div class="col-lg-4" ><h2>'
								+item.description
								+'</h2><img class="img-thumbnail" src="'
								+item.imgUrl
								+'" alt="Generic placeholder image" style="width: 100%;">'
								+'<p>'+item.title+'</p>'
								+'<p><a class="btn btn-primary" href="detail.html?id='+item.id+'" role="button">商品详情</a></p></div>';
								$("#itemList").append($(html));
							});
						}else{
							alert("商品添加失败，原因为"+data.data.Msg);
						}
						},
						error:function(err){
							console.log(err.responseText);
						}
					});
				
				$("#addItem").on("click",function(){
					window.location.href="edititem.html";
				});
				$("#toLogin").on("click",function(){
					window.location.href="login.html";
				});
			
			});
		</script>
	</body>

</html>